import { Form, Menu, Modal } from "antd";
import type { FormProps } from "antd";
import type { MenuProps } from "antd";
import styles from "./styles.module.less";
import { useEffect, useState } from "react";
import Conv from "./conv";
import Hotkey from "./hotkey";
import { useMainStore } from "@/store/mainStore";
import { useShallow } from "zustand/react/shallow";

type MenuItem = Required<MenuProps>["items"][number];

interface ISettingModalProps {
  open: boolean;
  closeModal: () => void;
}

const menuList: MenuItem[] = [
  {
    key: "conv",
    label: "常规",
  },
  {
    key: "hotkey",
    label: "快捷键",
  },
];

const SettingModal = (props: ISettingModalProps) => {
  const { open, closeModal } = props;
  const [form] = Form.useForm();
  const [sideTab, setSideTab] = useState("conv");

  const { initialSettingFormValues } = useMainStore(
    useShallow((state) => ({
      initialSettingFormValues: state.initialSettingFormValues,
    }))
  );

  const menuClick: MenuProps["onClick"] = (e) => {
    setSideTab(e.key);
  };

  const onFinish: FormProps["onFinish"] = (values) => {
    // 获取保留字段值
    console.log("getFieldsValue:", form.getFieldsValue(true));
  };

  useEffect(() => {
    if (open) {
      form.setFieldsValue({ ...initialSettingFormValues });
    }
  }, [open]);

  return (
    <Modal
      title="偏好设置"
      className={styles.settingModal}
      open={open}
      onCancel={() => {
        closeModal?.();
      }}
      okText="保存"
      cancelText="取消"
      centered
      destroyOnClose
      okButtonProps={{ htmlType: "submit" }}
      closable={false}
      maskClosable={false}
      modalRender={(dom) => (
        <Form
          className={styles.form}
          layout="horizontal"
          form={form}
          // labelCol={{ span: 7 }}
          labelAlign="left"
          onValuesChange={(_, val) => {
            console.log(val);
          }}
          autoComplete="off"
          onFinish={onFinish}
        >
          {dom}
        </Form>
      )}
    >
      <Menu
        className={styles.menu}
        theme="light"
        onClick={menuClick}
        selectedKeys={[sideTab]}
        mode="vertical"
        items={menuList}
      />
      <div className={styles.content}>
        {sideTab === "conv" && <Conv />}
        {sideTab === "hotkey" && <Hotkey />}
      </div>
    </Modal>
  );
};

export default SettingModal;
